@use "sass:map";

// {bem_b,bem_e,bem_m,VueAndNvueStyleAttr,when}
@use "./mixin/mixins.scss" as *;
@use './mixin/function.scss' as *;
// // {set-component-css-var}
@use "./mixin/_var.scss" as *;
// // {$badge}
@use "./common/var.scss" as *;

@import "common/index.scss";

	$e-action-sheet-reset-button-width:100% !default;
	$e-action-sheet-title-font-size: 16px !default;
	$e-action-sheet-title-padding: 12px 30px !default;
	$e-action-sheet-title-color: map.get($text-color, "primary") !default;
	$e-action-sheet-header-icon-wrap-right:15px !default;
	$e-action-sheet-header-icon-wrap-top:15px !default;
	$e-action-sheet-description-font-size:13px !default;
	$e-action-sheet-description-color:14px !default;
	$e-action-sheet-description-margin: 18px 15px !default;
	$e-action-sheet-item-wrap-item-padding:15px !default;
	$e-action-sheet-item-wrap-name-font-size:16px !default;
	$e-action-sheet-item-wrap-subname-font-size:13px !default;
	$e-action-sheet-item-wrap-subname-color: #c0c4cc !default;
	$e-action-sheet-item-wrap-subname-margin-top:10px !default;
	$e-action-sheet-cancel-text-font-size:16px !default;
	$e-action-sheet-cancel-text-color:map.get($text-color, "regular") !default;
	$e-action-sheet-cancel-text-font-size:15px !default;
	$e-action-sheet-cancel-text-hover-background-color:rgb(242, 243, 245) !default;

.e-reset-button {
		width: $e-action-sheet-reset-button-width;
	}

@include bem_b(action-sheet) {
		text-align: center;
		
		@include bem_e(content){
			background-color: #fff;
		}
		
		@include bem_e(header) {
			position: relative;
			padding: $e-action-sheet-title-padding;
	
			&__title {
				font-size: $e-action-sheet-title-font-size;
				color: map.get($text-color, "primary");
				font-weight: bold;
				text-align: center;
			}
	
			&__icon-wrap {
				position: absolute;
				right: $e-action-sheet-header-icon-wrap-right;
				top: $e-action-sheet-header-icon-wrap-top;
			}
		}
	
		@include bem_e(description) {
			font-size: $e-action-sheet-description-font-size;
			color: map.get($text-color, "secondary");
			margin: $e-action-sheet-description-margin;
			text-align: center;
		}
	
		@include bem_e(item-wrap) {
	
			&__item {
				padding: $e-action-sheet-item-wrap-item-padding;
				@include flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
	
				&__name {
					font-size: $e-action-sheet-item-wrap-name-font-size;
					color: map.get($text-color, "primary");
					text-align: center;
				}
	
				&__subname {
					font-size: $e-action-sheet-item-wrap-subname-font-size;
					color: $e-action-sheet-item-wrap-subname-color;
					margin-top: $e-action-sheet-item-wrap-subname-margin-top;
					text-align: center;
				}
			}
		}
	
		@include bem_e(cancel) {
			background-color: #fff;
			&-text{
				font-size: $e-action-sheet-cancel-text-font-size;
				color: map.get($text-color, "regular");
				text-align: center;
				padding: $e-action-sheet-cancel-text-font-size;
			}
		}
	
		@include bem_m(hover) {
			background-color: $e-action-sheet-cancel-text-hover-background-color;
		}
	
}
